<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getDepartmentsApi, delDepartmentsApi } from '@/api/departments'
import type { departments, depts } from '@/types/departments'
// 引入 转树状结构
import { transListToTreeData } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
// @ts-ignore
import addDept from './components/add-depts.vue'

// 获取add-depts组件实例
const addDeptsRef = ref<InstanceType<typeof addDept> | null>(null)
// 存储所有数据
const treeData = ref<departments>()
// 存储组织架构数据
const treeDataList = ref<depts[]>()
// 加载 loading
const loading = ref(false)

// 获取组织架构数据
const getDepartments = async () => {
  loading.value = true
  const res = await getDepartmentsApi()
  treeData.value = res.data
  // 转树状结构
  treeDataList.value = transListToTreeData(treeData.value.depts, '')
  loading.value = false
}

onMounted(() => {
  getDepartments()
})

// 删除功能
const delDepts = async (id: string) => {
  // 提示用户
  await ElMessageBox.confirm('此操作将永久删除该文件，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await delDepartmentsApi(id)
      // 提示用户
      ElMessage.success(res.message)
      // 重新获取数据
      await getDepartments()
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 添加功能
const nodeData = ref<depts>()
const addDeptFn = (data: depts) => {
  addDeptsRef.value?.openDialog('add')
  nodeData.value = data
}

// 编辑功能
const editDepts = (data: depts) => {
  addDeptsRef.value?.openDialog('edit')
  nodeData.value = data
}
</script>

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20"> {{ treeData?.companyName }} </el-col>
          <el-col :span="4">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">负责人</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 element -->
                <el-dropdown style="margin-top: 4px">
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <!-- 下拉菜单 -->
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="addDeptFn({ id: '', pid: '', name: '', code: '', introduce: '', manager: '', createTime: '' })"
                        >添加子部门</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 放置一个el-tree组件 -->
        <el-tree :data="treeDataList" default-expand-all v-loading="loading">
          <!-- 用了一个行列布局 -->
          <template #default="{ data }">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col :span="12">{{ data.manager }}</el-col>
                  <el-col :span="12">
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span>
                        操作<el-icon class="el-icon--right"><arrow-down /></el-icon
                      ></span>
                      <!-- 下拉菜单 -->
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="addDeptFn(data)">添加子部门</el-dropdown-item>
                          <el-dropdown-item @click="editDepts(data)">编辑部门</el-dropdown-item>
                          <el-dropdown-item @click="delDepts(data.id)">删除部门</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
      <!-- 弹层组件 -->
      <add-dept ref="addDeptsRef" :nodeData="nodeData" @updataList="getDepartments"></add-dept>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
